<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no"/>
    <title>新的朋友</title>
    <link rel="stylesheet" type="text/css" href="../../css/aui.css" />
    <link rel="stylesheet" type="text/css" href="../../css/style.css" />
</head>
<body>
    <header class="aui-bar aui-bar-nav aui-border-b">
        <div class="aui-pull-left aui-iconfont aui-icon-left icon-left-coler" tapmode onclick="closeWin()"></div>
        <div class="aui-title">新的好友</div>
    </header>

    <div class="aui-searchbar-wrap" id="search" style="width:100%;">
        <div class="aui-searchbar aui-border-radius" tapmode  onclick="doSearch()">
            <i class="aui-iconfont aui-icon-search"></i>
            <div class="aui-searchbar-text">手机号/昵称</div>
            <div class="aui-searchbar-input">
                <form action="javascript:search();">
                    <input type="search" placeholder="请输入搜索内容" id="search-input">
                </form>
            </div>
            <i class="aui-iconfont aui-icon-roundclosefill" tapmode onclick="clearInput()"></i>
        </div>
        <div class="aui-searchbar-cancel aui-text-info" tapmode onclick="cancelSearch()">取消</div>
    </div>


</body>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/common.js"></script>
<script type="text/javascript" src="../../script/jquery-1.11.3.js"></script>

<script type="text/javascript">
    apiready=function (argument) {
        api.parseTapmode();
        var mobile = api.pageParam.mobile;

    	var header = $api.dom('header');
		$api.fixIos7Bar(header);

        var searchHeight=$api.offset($api.byId('search')).h;

        var header_h = $api.offset(header).h+searchHeight;
        var body_h = $api.offset($api.dom('body')).h - header_h-searchHeight;
        api.openFrame({
            name : 'newfriend_frm',
            url : 'newfriend_frm.html',
            rect : {
                x : 0,
                y : header_h-0.5,
                w : 'auto',
                h : body_h
            },
            pageParam : {
                mobile : mobile
            },
            bounces : false,
            vScrollBarEnabled : false,
            hScrollBarEnabled : false
        });       
    }

    $(document).ready(function(){
        $('#search-input').blur(function(){
            cancelSearch();
        });
    });

    function doSearch(){
        $api.addCls($api.dom(".aui-searchbar-wrap"),"focus");
        $api.dom('.aui-searchbar-input input').focus();
    }
    function cancelSearch(){
        $api.removeCls($api.dom(".aui-searchbar-wrap.focus"),"focus");
        $api.val($api.byId("search-input"),'');
        $api.dom('.aui-searchbar-input input').blur();
    }
    function clearInput(){
        $api.val($api.byId("search-input"),'');
    }
    function search(){
        var content = $api.val($api.byId("search-input"));
        if(content){
            // api.alert({
            //     title: '搜索提示',
            //     msg: '您输入的内容为：'+content
            // });
        }else{
            api.alert({
                title: '搜索提示',
                msg: '您没有输入任何内容'
            });
        }
        cancelSearch();
    }
</script>

</html>